<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            .outer-btn{
                position: relative;
                width: 300px;
                height: 100px;
                background: red;
            }

            .inner-btn{
                position: relative;
                width: 200px;
                height: 80px;
                background: yellow;
            }
        </style>
    </head>

    

    <body>
        <div class="outer-btn">
            外部按钮
            <div class="inner-btn">内部按钮</div>
        </div>
        <script>
            var outerBtn = document.querySelector(".outer-btn");
            var innerBtn = document.querySelector(".inner-btn");

            new MutationObserver(function () {
                console.log("mutate 微任务");
            }).observe(outerBtn, {
                //观察属性变化
                attributes: true,
            });

            //点击方法
            function onClick() {
                console.log("click");
                setTimeout(function () {
                    console.log("timeout 宏任务");
                });
                Promise.resolve().then(function () {
                    console.log("promise 微任务");
                });

                outerBtn.setAttribute("data-number", Math.random());
            }

            outerBtn.addEventListener("click", onClick);
            innerBtn.addEventListener("click", onClick);


            // click时：
            // 宏任务队列：onClick(inner), onClick(outer)



            // 事件循环： 执行第一个onClick(inner)
            // 执行前：
            // 宏任务队列：onClick(inner), onClick(outer)
            // 微任务任务队列：

            //// console.log("click");

            // 执行后：
            // 宏任务队列： onClick(outer), setTimeout
            // 微任务任务队列：promise, mutate

            //// 执行微任务输出： promise 微任务, mutate 微任务




            //事件循环： 执行第二个onClick(outer)
            // 执行前：
            // 宏任务队列：onClick(outer), setTimeout
            // 微任务任务队列：

            //// console.log("click");

            // 执行后：
            // 宏任务队列： setTimeout, setTimeout
            // 微任务任务队列：promise, mutate

            ///// 执行微任务输出： promise 微任务, mutate 微任务




            // 下一个事件循环
            // 执行前 宏任务队列： setTimeout, setTimeout
            //// 输出 timeout 宏任务
            // 执行后 宏任务队列： setTimeout




            // 再下一个事件循环
            // 执行前 宏任务队列： setTimeout
            //// 输出 timeout 宏任务
            // 执行后 宏任务队列：




        </script>
    </body>
</html>
